<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}, {{ nl }}</h2>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeName">修改名字</button>
  </div>
</template>


<script lang="ts" setup name="Person">
import { ref, reactive ,toRefs,toRef} from "vue";

let person = reactive({
  'name': '张三',
  'age':10
})
let { name, age } = toRefs(person)
console.log(toRefs(person))

let nl = toRef(person, 'age')
console.log(nl)

function changeAge() {
  age.value += 1
  console.log(age)
}
function changeName() {
  name.value += '~'
  console.log(name.value,person.name)
}


</script>

<style scoped>
li {
  font-size: 20px;
}
button{
  margin: 0 10px auto;
}
</style>
